<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>doctor</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/im.css">
    <style>
        html,
        body {
            /* height: 100%; */
            overflow: hidden
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="tab_title">
            <ul>
                <li>
                    <a href="doctorHistory.html">历史订单</a>
                </li>
                <li>
                    <a href="doctorRecord.html">检查报告</a>
                </li>
                <li class="t_active">咨询</li>
            </ul>
        </div>
        <div class="tab_content">
            <div class="c_on">
                <div class="chat_content">

                    <!-- 时间 -->
                    <div class="time">
                        <span>2017-10-20 11:30</span>
                    </div>

                    <!-- 对方 普通文字-->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text_t margin_left">
                            <span>您好</span>
                        </div>
                    </div>

                    <!-- 自己 普通文字-->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text_t margin_right">
                            <span>您好，我是左炙医师，欢迎来咨询！
                                    由于医院工作比较繁忙，未能及时回复，尽情谅解！</span>
                        </div>
                    </div>

                    <!-- 对方 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text_t margin_left">
                            <span>给我个预诊单</span>
                        </div>
                    </div>

                    <!-- 自己 预诊单 -->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class=" margin_right combination min_width">
                            <div class="c_title">
                                <span class="icon_10"></span>
                                <span>预诊单</span>
                            </div>
                            <div class="text1">
                                <span>我刚刚给您发送了一份预诊单，请如实填写，方便我为您提供建议。 </span>
                                <a href="">点击查看详情</a>
                            </div>
                        </div>
                    </div>

                    <!-- 对方 预诊单（已完成）-->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text margin_left max_windth">
                            <div class="m_title">
                                <span class="icon_11"></span>
                                <span>预诊单（已完成）</span>
                            </div>
                            <div class="text2">
                                <span class="user">用户：陈秀荣，男，33岁<br>主诉：喉咙很痛</span>
                                <a href="">点击查看</a>
                            </div>
                        </div>
                    </div>

                    <!-- 自己 预诊单 （已完成）-->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class=" margin_right combination max_windth ">
                            <div class="c_title">
                                <span class="icon_10"></span>
                                <span>预诊单（已完成）</span>
                            </div>
                            <div class="text3">
                                <span class="user2">用户：陈秀荣，男，33岁<br>主诉：喉咙很痛，眼睛也很痛，还咳嗽，流鼻涕，拉肚子，腰酸背痛腿抽筋，吃不好，睡不好，穿不暖，</span>
                                <a href="">点击查看</a>
                            </div>
                        </div>
                    </div>


                    <!-- 对方 预诊单 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text margin_left min_width">
                            <div class="m_title">
                                <span class="icon_11"></span>
                                <span>预诊单</span>
                            </div>
                            <div class="text4">
                                <span>我刚刚给您发送了一份预诊单，请如实填写，方便我为您提供建议。 </span>
                                <a href="">点击查看详情</a>
                            </div>
                        </div>
                    </div>

                    <!-- 时间 -->
                    <div class="time">
                        <span>2017-10-22 12:30</span>
                    </div>

                    <!-- 对方 日常文字 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text_t margin_left">
                            <span>给我个随访单</span>
                        </div>
                    </div>

                    <!-- 自己 随访单 -->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class=" margin_right combination min_width">
                            <div class="c_title">
                                <span class="icon_12"></span>
                                <span>随访单</span>
                            </div>
                            <div class="text1">
                                <span>我刚刚给您发送了一份随访单，想了解您的近况，请尽快填写。 </span>
                                <a href="">点击查看详情</a>
                            </div>
                        </div>
                    </div>

                    <!-- 对方 随访单已完成 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text margin_left max_windth">
                            <div class="m_title">
                                <span class="icon_13"></span>
                                <span>随访单（已完成）</span>
                            </div>
                            <div class="text2">
                                <span class="user">用户：陈秀荣，男，33岁<br>病情变化：痊愈喉咙很痛，眼睛也很痛，还咳嗽，流鼻涕，拉肚子</span>
                                <a href="">点击查看</a>
                            </div>
                        </div>
                    </div>

                    <!-- 自己 随访单已完成 -->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class=" margin_right combination max_windth ">
                            <div class="c_title">
                                <span class="icon_12"></span>
                                <span>随访单（已完成）</span>
                            </div>
                            <div class="text3">
                                <span class="user2">用户：陈秀荣，男，33岁<br>病情变化：喉咙很痛，眼睛也很痛，还咳嗽，流鼻涕，拉肚子，腰酸背痛腿抽筋，吃不好，睡不好，穿不暖，</span>
                                <a href="">点击查看</a>
                            </div>
                        </div>
                    </div>

                    <!-- 对方 随访单 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text margin_left min_width">
                            <div class="m_title">
                                <span class="icon_13"></span>
                                <span>随访单</span>
                            </div>
                            <div class="text4">
                                <span>我刚刚给您发送了一份随访单，想了解您的近况，请尽快填写。  </span>
                                <a href="">点击查看详情</a>
                            </div>
                        </div>
                    </div>

                    <!-- 时间 -->
                    <div class="time">
                        <span>2017-10-29 1:30</span>
                    </div>

                    <!-- 自己 用药建议 -->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class=" margin_right combination min_width">
                            <div class="c_title">
                                <span class="icon_14"></span>
                                <span>用药建议</span>
                            </div>
                            <div class="text1">
                                <span>我刚刚给您发送了一份用药建议，请您查看。 </span>
                                <a href="">点击查看详情</a>
                            </div>
                        </div>
                    </div>

                    <!-- 对方 用药建议 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text margin_left min_width">
                            <div class="m_title">
                                <span class="icon_15"></span>
                                <span>用药建议</span>
                            </div>
                            <div class="text4">
                                <span>我刚刚给您发送了一份用药建议，请您查看。  </span>
                                <a href="">点击查看详情</a>
                            </div>
                        </div>
                    </div>

                    <!-- 自己 付款成功 -->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class=" margin_right combination max_windth ">
                            <div class="c_title">
                                <span class="icon_16"></span>
                                <span>付款成功</span>
                            </div>
                            <div class="text3">
                                <span class="user2">用户：陈秀荣，男，33岁<br>订单金额：200元<br>订单类型：中药饮片<br>订单方式：代煎代送</span>
                                <a href="">点击查看</a>
                            </div>
                        </div>
                    </div>
                    <!-- 对方 付款成功 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="text margin_left max_windth">
                            <div class="m_title">
                                <span class="icon_17"></span>
                                <span>付款成功</span>
                            </div>
                            <div class="text2">
                                <span class="user">用户：陈秀荣，男，33岁<br>订单金额：200元<br>订单类型：中药饮片<br>订单方式：代煎代送</span>
                                <a href="">点击查看</a>
                            </div>
                        </div>
                    </div>
                    <!-- 自己 图片 -->
                    <div class="me top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="m_img">
                            <img src="images/payy.png" class="boximg">
                        </div>
                    </div>
                    <!-- 对方 图片 -->
                    <div class="yours top_30 flexs">
                        <div class="head">
                            <img src="images/head_1.png" alt="">
                        </div>
                        <div class="m_img">
                            <img src="images/payy.png" class="boximg">
                        </div>
                    </div>

                </div>
                <div class="chat_bottom">
                    <div class="chat_other">
                        <div>
                            <span class="icon_3">
                                    <input type="file" name="file" id="cameraInput" class="file" value="" accept="image/*" multiple />
                            </span>
                            <!-- <span>图片</span> -->
                        </div>
                        <!-- <div class="call_well">
                            <span class="icon_4"></span>
                            <span>通话</span>
                        </div>
                        <div>
                            <span class="icon_5"></span>
                            <span>定位</span>
                        </div>
                        <div>
                            <span></span>
                            <span></span>
                        </div> -->
                        <div class="advance">
                            <span class="icon_6"></span>
                            <!-- <span>预诊单</span> -->
                        </div>
                        <div>
                            <span class="icon_7"></span>
                            <!-- <span>用药建议</span> -->
                        </div>
                        <div>
                            <span class="icon_8"></span>
                            <!-- <span>拍方</span> -->
                        </div>
                        <!-- <div class="follow_up">
                            <span class="icon_9"></span>
                            <span>随访单</span>
                        </div> -->
                    </div>
                    <div class="chat_inpit">
                        <div class="input_c" contenteditable="plaintext-only"></div>
                        <span class="icon_1"></span>
                        <span class="icon_2"></span>
                        <span class="send_out">发送</span>
                    </div>
                    <!-- <div class="chat_other">
                        <div>
                            <span class="icon_3">
                                    <input type="file" name="file" id="cameraInput" class="file" value="" accept="image/*" multiple />
                            </span>
                            <span>图片</span>
                        </div>
                        <div class="call_well">
                            <span class="icon_4"></span>
                            <span>通话</span>
                        </div>
                        <div>
                            <span class="icon_5"></span>
                            <span>定位</span>
                        </div>
                        <div>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="advance">
                            <span class="icon_6"></span>
                            <span>预诊单</span>
                        </div>
                        <div>
                            <span class="icon_7"></span>
                            <span>用药建议</span>
                        </div>
                        <div>
                            <span class="icon_8"></span>
                            <span>拍方</span>
                        </div>
                        <div class="follow_up">
                            <span class="icon_9"></span>
                            <span>随访单</span>
                        </div>
                    </div> -->
                </div>

            </div>
        </div>
    </div>

    <div class="popup">
        <div class="backg"></div>
        <div class="more_language">
            <div class="more_list">
                <div class="more_l_t">
                    <span>选择常用语</span>
                    <span></span>
                </div>
                <ul class="more_list_l">
                    <li>1、现有最主要的不适及症状（请详细描述你的症状）</li>
                    <li>2、每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</li>
                    <li>3、如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</li>
                    <li>4、现有最主要的不适及症状（请详细描述你的症状）</li>
                    <li>5、现有最主要的不适及症状（请详细描述你的症状）</li>
                    <li>6、现有最主要的不适及症状（请详细描述你的症状）</li>
                    <li>7、现有最主要的不适及症状（请详细描述你的症状）</li>
                    <li>8、如果项目未设置高度或设为auto，将占满整个容器的高度。</li>
                    <li>9、每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</li>
                    <li>10、我刚刚给您发送了一份随访单，想了解您的近况，请尽快填写。</li>
                </ul>
            </div>
            <div class="more_custom">
                <a href="commonsay.html"> 编辑常用语</a>
            </div>
        </div>
        <div class="imgBox">
            <!-- <div></div>
                <span>发送</span>
                <img src="images/payy.png" alt=""> -->
        </div>
        <div class="android_up">
            <div class="a_u_title">
                <span>图片</span>
                <span></span>
            </div>
            <div class="camera_a">
                <span class="camera_i"></span>
                <span>相机</span>
                <input type="file" name="file" id="cameraInput1" class="file" value="" accept="image/*" capture='camera'>
            </div>
            <div class="album">
                <span class="album_i"></span>
                <span>相册</span>
                <input type="file" name="file" id="cameraInput2" class="file" value="" accept="image/jpeg,image/jpeg,image/png,image/bmp" multiple />
            </div>
        </div>
        <div class="imgShow">
            <!-- <img src="images/payy.png" alt=""> -->
        </div>
        <!-- 通话 -->
        <div class="call_now">
            <div class="call_t">
                <span>提示</span>
                <span>您正在发起通话，请注意接听0591-87604350的来电</span>
            </div>
            <div class="yesorok">
                <span>取消</span>
                <span>确定</span>
            </div>
        </div>
        <!-- 预诊单样式 -->
        <div class="advance_type">
            <div>选择预诊单样式</div>
            <div>
                <span class="s_active">男</span>
                <span>女</span>
                <span>儿童</span>
            </div>
        </div>
    </div>
    <script src="js/RongIMLib-2.2.8.min.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/im.js"></script>
    <script src="js/upload.js"></script>
    <script>
        var config = {
                maxWidth: 600,
                maxHeight: 700,
                maxSize: 100 //K
            }
            // var node = document.getElementById("cameraInput");
            // node.onchange = function(e) {

        //     var file = this.files[0];
        //     window.UploadFile.resize(file, config, function(imageData) {
        //         console.log(imageData)
        //     });
        // $.ajax({
        //     type: "get",
        //     url: "http://ww.lehuo100.com/doctor_ajax.php?do=doctorimgup",
        //     data: {
        //         "base64": imageData,
        //     },
        //     dataType: "json",

        //     success: function(res) {
        //         console.log(res)
        //     },
        //     error: function(err) {
        //         layer.msg('连接服务器失败', {
        //             time: 1000
        //         });
        //     }
        // });

        // im.chooseImg(file);
        // im.popupShow2(".android_up", false);
        // $(".imgBox").css("display", "block")
        // im.chatHeiht();
        // };
        var doctor = {
            config: {
                val: '',
                // str: '', //发送的普通文字
                advance: '', //预诊单
                followup: '', //随访单
            },
            init: function() {
                var _this = this;
                im.chatHeiht();
                im.onScrollTop();
                // 选项卡
                // $(".tab_title li").click(function() {
                //     var index = $(this).index();
                //     $(".tab_title li").eq(index).addClass("t_active").siblings().removeClass("t_active");
                //     $(".tab_content>div").hide().eq(index).show()
                // })
                $(".chat_inpit .input_c").focus(function() {
                    // _this.chatOtherShow(false)
                    im.chatHeiht();
                })
                $(".chat_inpit .input_c").blur(function() {
                    im.chatHeiht();
                });
                // 点击加号时 展开更多操作
                // $(".chat_inpit .icon_2").click(function() {
                //     // _this.chatOtherShow(true);
                //     im.chatHeiht();
                // })
                $(".chat_content").click(function() {
                    // _this.chatOtherShow(false);
                    im.chatHeiht();
                });
                // $(".chat_inpit .icon_2").toggle(function() {
                //     $(".chat_inpit .input_c").blur();
                //     _this.chatOtherShow(true);
                //     im.chatHeiht();
                // }, function() {
                //     _this.chatOtherShow(false);
                //     im.chatHeiht();
                // });
                // 输入框有文字时 切换为发送
                $(".chat_inpit .input_c")[0].addEventListener("input", function() {
                    _this.config.val = $(this).html();
                    _this.sendShow(_this.config.val)
                    console.log(_this.config.val)

                });
                // 点击发送
                $(".send_out").click(function() {
                    var val = $(".chat_inpit .input_c").html();
                    im.sendText(val);
                    _this.sendShow(false);
                });
                //点击预诊单
                $(".advance").click(function() {
                    _this.config.advance += "<div class='me top_30 flexs'><div class='head'><img src='images/head_1.png'></div><div class=' margin_right combination min_width'><div class='c_title'><span class='icon_10'></span><span>预诊单</span></div><div class='text1'><span>我刚刚给您发送了一份预诊单，请如实填写，方便我为您提供建议。 </span><a href=''>点击查看详情</a></div></div></div>"
                    $(".chat_content").append(_this.config.advance);
                    im.onScrollTop();
                    im.chatHeiht();
                    // RCS.send(event)
                });
                //点击随访单
                $(".follow_up").click(function() {
                    _this.config.followup += "<div class='me top_30 flexs'>" +
                        "<div class='head'>" +
                        "<img src='images/head_1.png'>" +
                        "</div>" +
                        "<div class=' margin_right combination min_width'>" +
                        " <div class='c_title'>" +
                        "<span class='icon_12'></span>" +
                        "<span>随访单</span>" +
                        "</div>" +
                        "<div class='text1'>" +
                        "  <span>我刚刚给您发送了一份随访单，想了解您的近况，请尽快填写。 </span>" +
                        " <a href=''>点击查看详情</a>" +
                        "  </div>" +
                        "  </div>" +
                        " </div>"
                    $(".chat_content").append(_this.config.followup);
                    im.onScrollTop();
                    im.chatHeiht();
                });
                //点击弹出常用语
                $(".chat_inpit .icon_1").click(function() {
                    _this.popupShow(".more_language", true);
                });
                // 点击关闭常用语
                $(".more_l_t span").last().click(function() {
                    _this.popupShow(".more_language", false);
                });
                // 点击常用语 然后发送出去
                $(".more_list_l li").click(function() {
                    var text = $(this).text();
                    im.sendText(text);
                    _this.sendShow(false);
                    _this.popupShow(".more_language", false);

                });

                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (false) {
                    $(".chat_other input").show();
                } else if (true) {
                    $(".chat_other input").hide();
                    $(".chat_other div:first").click(function() {
                        im.popupShow2(".android_up", true);
                        // _this.chatHeiht();
                    })
                }
                //点击图片
                $("#cameraInput").change(function() {
                    console.log(123)
                    var file = this.files[0];
                    im.chooseImg(file);
                    im.popupShow2(".android_up", false);
                    $(".imgBox").css("display", "block")
                    im.chatHeiht();
                });
                // document.getElementById("cameraInput").onchange = function(e) {
                //     var file = this.files[0];
                //     console.log(file.size)
                //     window.UploadFile.resize(file, config, function(imageData) {
                //         console.log(imageData)
                //         console.log(imageData.length)
                //         if (imageData.length < 10) {
                //             alert("对不起你选择的图片过大，请重新选择图片")
                //         } else {
                //             $.ajax({
                //                 type: "post",
                //                 url: "http://ww.lehuo100.com/doctor_ajax.php?do=doctorimgup",
                //                 data: {
                //                     "base64": imageData,
                //                 },
                //                 dataType: "json",

                //                 success: function(res) {
                //                     console.log(res)
                //                 },
                //                 error: function(err) {
                //                     // layer.msg('连接服务器失败', {
                //                     //     time: 1000
                //                     // });
                //                 }
                //             });
                //         }

                //     });
                //     // im.chooseImg(file);
                //     // im.popupShow2(".android_up", false);
                //     // $(".imgBox").css("display", "block")
                //     // im.chatHeiht();
                // };
                //点击图片
                $("#cameraInput1").change(function() {
                    console.log(123)
                    var file = this.files[0];
                    im.chooseImg(file);
                    im.popupShow2(".android_up", false);
                    $(".imgBox").css("display", "block")
                    im.chatHeiht();
                });
                //点击图片
                $("#cameraInput2").change(function() {
                    // console.log(123)
                    var file = this.files[0];
                    im.chooseImg(file);
                    im.popupShow2(".android_up", false);
                    $(".imgBox").css("display", "block")
                    im.chatHeiht();
                });
                // 点击发送图片
                $(".imgBox").on("click", "span", function() {
                    // console.log(123)
                    var imgSrc = $(this).parent().children("img").attr("src");
                    im.sendImg(imgSrc);
                    im.chatHeiht();
                });

                // 点击通话
                $(".call_well").click(function() {
                    im.popupShow2(".call_now", true);
                });
                // 点击取消通话
                $(".yesorok span:first").click(function() {
                    im.popupShow2(".call_now", false);
                });
                // 点击确定通话
                $(".yesorok span:last").click(function() {
                    im.popupShow2(".call_now", false);
                    // coding
                });
                // 选择预诊单样式
                $(".advance_type div span").click(function() {
                    $(this).addClass("s_active").siblings().removeClass("s_active")
                });
                // 点击聊天内的图片全屏查看
                var imgSrcStr = '';
                $(".chat_content").on("click", ".boximg", function() {
                    console.log(1010)
                    var imgSrc = $(this).attr("src");
                    console.log(imgSrc)
                    imgSrcStr += "  <img src='" + imgSrc + "'>";
                    $(".imgShow").append(imgSrcStr);
                    imgSrcStr = ''
                    im.popupShow2(".imgShow", true);
                })

                $(".imgShow").on("click", "img", function() {
                    $(".imgShow").html('')
                    im.popupShow2(".imgShow", false);
                });
                //关闭相机相册选择控件
                $(".a_u_title span").last().click(function() {
                    im.popupShow2(".android_up", false);
                    im.chatHeiht();
                });
                // 关闭弹出层
                $(".backg").click(function() {
                    im.popupShow2(".android_up", false);
                    _this.popupShow(".more_language", false);
                    im.popupShow2(".call_now", false);
                    im.chatHeiht();
                })
            },

            // 底部更多操作的开关
            chatOtherShow: function(bool) {
                if (bool) {
                    $(".chat_other").css({
                        "height": "3.6rem",
                    })
                } else {
                    $(".chat_other").css({
                        "height": "0rem",
                    })
                }
            },
            // 输入框有文字时 切换为发送
            sendShow: function(bool) {
                if (bool) {
                    $(".icon_2").hide();
                    $(".send_out").show();
                } else {
                    $(".icon_2").show();
                    $(".send_out").hide();
                }
            },

            popupShow: function(el, bool) {
                if (bool) {
                    $(".backg").show();
                    $(el).css({
                        "transform": "translateY(0)",
                        "-webkit-transform": "translateY(0)"
                    });

                } else {
                    setTimeout(function() {
                        $(".backg").hide();
                    }, 100)
                    $(el).css({
                        "transform": "translateY(8rem)",
                        "-webkit-transform": "translateY(8rem)"
                    })
                }
            },

        }
        doctor.init()
    </script>
</body>

</html>